<script lang="ts" setup>
import { onMounted, watch } from 'vue';

import { Tag } from 'ant-design-vue';

interface Props {
  tagList?: { label: string; value: number | string }[];
}

const props = withDefaults(defineProps<Props>(), {
  tagList: () => [],
});

const emit = defineEmits(['change']);
const selected = defineModel<any>('value', {
  default: () => [],
});

watch(
  () => props.tagList,
  () => {
    selected.value = props.tagList.map((v) => v.value);
    emit('change', selected.value);
  },
  { deep: true },
);

onMounted(() => {
  if (props.tagList.length > 0) {
    selected.value = props.tagList.map((v) => v.value);
  }
});
</script>
<template>
  <div class="flex flex-wrap">
    <Tag v-for="(item, i) in tagList" :key="i" color="blue" class="m-[3px]">
      {{ item.label }}
    </Tag>
  </div>
</template>
